<template>
	<view class="">
		<view class="head" @click="top()">
			<image src="../../static/q1_02.png" mode=""></image>
			<view class="top" :style="{'display':(flag===true? 'block':'none')}">
			  <uni-icons class="topc" type="upload" size="50" @click="top"></uni-icons>
			</view>
		</view>
		<view class="two_box">
			<view class="box_one">
				<view class="t_b_top flex1">
					<text class="shuzi1">￥1080</text>
					<text class="yishou">已售3561</text>
				</view>
				<view class="t_b_bottom">
					2616元加油券包
				</view>
			</view>
			<view class="box_two flex1" @click="sell">
				<view class="t_b_zuo">
					<text>保障</text>
					<text>支持7天无理由退款.消费者保障服务</text>
				</view>
				<view class="t_b_you">
					>
				</view>
			</view>
			<view class="share">
				<view :class="{'box': share}" @click="display">
				</view>
				<view class="share-item" :class="{'show': share}">
					<view class="share-con">
						<p class="title">保障说明<span  @click.stop="display">×</span></p>
						<view class="cont flex">
							<image src="../../static/images/seven_03.png"></image>
							<view class="cont-r">
								<p class="strong">支持7天无理由退货</p>
								1.未使用的，可全额退款<br>
								2.使用部分优惠券的，退款时直接扣除已发生抵扣金额后予以退款，即退款金额=购买金额-已使用优惠券面额
			
							</view>
						</view>
						<view class="cont flex">
							<image src="../../static/images/seven_06.png"></image>
							<view class="cont-r">
								<p class="strong">消费者保障服务</p>
								如商品存在与描述不符的情况，你有权申请退款					
							</view>							
						</view>					
					</view>				
				</view>
			</view>
		</view>
		<view class="image1">
			<image src="../../static/r1.jpg" mode="widthFix"></image>
			<image src="../../static/r2.jpg" mode="widthFix"></image>
			<image src="../../static/r3.jpg" mode="widthFix"></image>
		</view>
<view class="du_mains">
					<view class="du_box1" @click="sheng1()">
						<p class="fuli">月油耗400</p>
						<view class="three_box1">
							<view class="t_b_zuo1" v-for="(item,index) in yueyou4" :key="index">
								<image :src="item.img" mode="widthFix"></image>
								<p>{{item.text1}}</p>
								<p class="text2">{{item.text2}}</p>
								<view class="text_san flex">
									<view class="t_san_top">
										<p class="text34">{{item.text3}}{{item.text4}}</p>
								    <p class="text5">{{item.text5}}</p>
									</view>
									<p class="text6">{{item.text6}}</p>
								</view>
							</view>
						</view>
					</view>
				</view>
				
	</view>
	
</template>

<script>
	export default {
		name:"viewTop",
		data() {
			return {
				 flag:false,
share: false,
				yueyou4:[{img:'../../static/q1_02.png',text1:'2616元加油券包',text2:'300-109,大额油券来袭',text3:'￥',text4:'1818',text5:'已售3560',text6:"抢购"},
				{img:'../../static/q1_02.png',text1:'2616元加油券包',text2:'300-109,大额油券来袭',text3:'￥',text4:'1818',text5:'已售3560',text6:"抢购"},
				{img:'../../static/q1_02.png',text1:'2616元加油券包',text2:'300-109,大额油券来袭',text3:'￥',text4:'1818',text5:'已售3560',text6:"抢购"},
				{img:'../../static/q1_02.png',text1:'2616元加油券包',text2:'300-109,大额油券来袭',text3:'￥',text4:'1818',text5:'已售3560',text6:"抢购"},
				{img:'../../static/q1_02.png',text1:'2616元加油券包',text2:'300-109,大额油券来袭',text3:'￥',text4:'1818',text5:'已售3560',text6:"抢购"},
				{img:'../../static/q1_02.png',text1:'2616元加油券包',text2:'300-109,大额油券来袭',text3:'￥',text4:'1818',text5:'已售3560',text6:"抢购"},
				{img:'../../static/q1_02.png',text1:'2616元加油券包',text2:'300-109,大额油券来袭',text3:'￥',text4:'1818',text5:'已售3560',text6:"抢购"},
				{img:'../../static/q1_02.png',text1:'2616元加油券包',text2:'300-109,大额油券来袭',text3:'￥',text4:'1818',text5:'已售3560',text6:"抢购"},
				{img:'../../static/q1_02.png',text1:'2616元加油券包',text2:'300-109,大额油券来袭',text3:'￥',text4:'1818',text5:'已售3560',text6:"抢购"},
				{img:'../../static/q1_02.png',text1:'2616元加油券包',text2:'300-109,大额油券来袭',text3:'￥',text4:'1818',text5:'已售3560',text6:"抢购"},
				{img:'../../static/q1_02.png',text1:'2616元加油券包',text2:'300-109,大额油券来袭',text3:'￥',text4:'1818',text5:'已售3560',text6:"抢购"}
				],
			}
		},
	onPageScroll(e){ //根据距离顶部距离是否显示回到顶部按钮
			if(e.scrollTop>150){ //当距离大于150时显示回到顶部按钮
				   this.topState = true
			}else{ //当距离小于600时显示回到顶部按钮
				   this.topState = false
			}
		},
		methods: {
			top() { //回到顶部
					uni.pageScrollTo({ 
					scrollTop: 0, duration: 300 
				    }); 
			    },
			
			sell() {
				this.share = true;
			},
			// 隐藏分享
			display() {
				this.share = false;
			},
top() { //回到顶部
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 300
		});
	},
	onPageScroll(e){ //根据距离顶部距离是否显示回到顶部按钮
		if(e.scrollTop>600){ //当距离大于600时显示回到顶部按钮
			this.flag=true
		}else{ //当距离小于600时隐藏回到顶部按钮
			this.flag=false
		}
	},
		}

	}
</script>

<style lang="scss">
	@import url("../../static/css/sheng1.css");
	/* 回到顶部 */
		.top {
			position: relative;
			display: none; /* 先将元素隐藏 */
		}
	 
		.topc {
			position: fixed;
			right: 0;
			background: #F0F0F0;
			border-radius:30rpx;
			top: 70%;
			height: 50px;
			line-height: 50px;
		}
	.share {
		width: 100%;
		height: 100%;
		background: #000000;
		position: relative;
		z-index: 1;
	}
	
	.box {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		bottom: 0rpx;
		right: 0rpx;
		background-color: rgba(0, 0, 0, 0.4);
		transition: .3s;
		z-index: 999;
	}
	
	// 进入分享动画
	.show {
		transition: all 0.3s ease;
		transform: translateY(0%) !important;
	}
	
	// 离开分享动画
	.share-item {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: auto;
		background-color: #fff;
		transition: all 0.3s ease;
		transform: translateY(100%);
		z-index: 1999;
	  border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		
		.share-con {
			width: 90%;
			height: 550rpx;
			padding: 30rpx;
			margin: auto;
			align-items: center;
		}
	
	.flex{display: flex;justify-content: space-between;}
		.cont-r{width: 80%;padding-left: 20rpx;font-size: 28rpx;color: #666;line-height: 45rpx;}
		.cont image{width: 140rpx ;height: 140rpx;}
	  .title{font-size: 50rpx;font-weight: bold;text-align: center;margin-bottom: 20rpx;}
		.title span{float:right;color: #999;}
		.cont{margin-bottom: 40rpx;}
		.strong{font-size: 35rpx;color: #000000;margin-bottom: 10rpx;}
		
	}
</style>
